<!-- 网格长查看打卡记录 -->
<template>
	<view class="viewBg">
		<!-- 选择开始日期 -->
		<view class="selectDate">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateStart" :start="startDate" :end="endDate" @change="bindStartDateChange">
					<view class="uni-input">{{dateStart}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<!-- 选择结束日期 -->
		<view class="selectDate" @click="onShowDatePicker2">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
					<view class="uni-input">{{dateEnd}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<view class="checkBox">
			<axb-check-box ref="radio3" :list="sartTime" @change="radioChangeType"></axb-check-box>
		</view>
		<button type="primary" @click="checkClockIn">查询打卡情况</button>
		<view class="uni-padding-wrap uni-common-mt" v-for="(item,index) in listArray" :key="index">
			<view class="uni-card">
				<view class="uni-card-content" @click="goDetail(item)">
					<view class="uni-card-content-inner">
						<view>{{item.name +" " + item.mobile}}</view>
						<view>{{item.gridName}}</view>
						<view>{{item.info}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import axbCheckBox from "@/components/axb-checkbox/axb-checkbox.vue"
	import {
		lastMonth,
		month
	} from '../../../common/date-utils.js'
	export default {
		components: {
			axbCheckBox,
			lastMonth,
			month,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				dateStart: currentDate,
				dateEnd: currentDate,
				pageNo: 1,
				listArray: [],
				sartTime: [{
					name: '本月记录',
					value: 'thisMonth',
					checked: 0
				}, {
					name: '上月记录',
					value: 'lastMonth',
					checked: 0
				}],
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onReachBottom() {
			this.pageNo++;
			this.getUsersClockIn();
		},
		methods: {
			bindStartDateChange: function(e) {
				this.dateStart = e.target.value

			},
			bindEndDateChange: function(e) {
				this.dateEnd = e.target.value;
			},

			checkClockIn() {
				this.listArray = new Array();
				this.pageNo = 1;
				this.getUsersClockIn();
			},
			getUsersClockIn() {
				this.$http.get('ac/xagrid/appAttenceService/getAttenceStatistics', {
					pageNo: this.pageNo,
					pageSize: 10,
					startDate: this.dateStart,
					endDate: this.dateEnd
				}).then((res) => {
					if(res.errcode === '0'){
						this.listArray = this.listArray.concat(res.data.results);
					}else{
						uni.showModal({
							title:'提示',
							content:res.errmsg
						})
					}
					
				})
			},
			goDetail: function(item) {
				let userId = item.userId;
				uni.navigateTo({
					url: "../clockInRecordDetail/clockInRecordDetail?userId=" + userId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			radioChangeType(value) {
				if (value === 'thisMonth') {
					var m = month();
					console.log('月' + m);
					this.dateStart = m[0];
					this.dateEnd = m[1];
				} else if (value === 'lastMonth') {
					var w = lastMonth();
					this.dateStart = w[0];
					this.dateEnd = w[1];
				}
			},
			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.viewBg {
		width: 100%;
		height: 100%;
		/* background-color: #0FAEFF; */
	}

	.selectDate {
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.lineH20 {
		height: 20upx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.lineH1 {

		height: 2upx;
		width: 100%;
		/* margin-left: 10upx; */
		background-color: #F7F7F7;
	}

	.monthCheck {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-right: 30upx;
		margin-top: 30upx;
		color: #007AFF;
	}

	.checkBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		flex-flow: wrap;
		margin: 20upx;
	}

	button {
		margin: 30upx;
	}
</style>
